<template>
  <div class="my-home">
    <my-header
      :list="list"
      @addValue="addValue"
      @busClearValue="busClearValue"
    ></my-header>
    <my-list :thekey="'todo'" :list="list" @del="del">
      <template v-slot:title> 正在进行 </template>
    </my-list>
    <my-list :thekey="'done'" :list="list" @del="del">
      <template v-slot:title> 已经完成 </template>
    </my-list>
  </div>
</template>

<script setup>
import useLocalHook from './Hooks/useLocalHook'
const list = ref([]);
useLocalHook(list)
const addValue = (value) => {
  list.value.push({
    value,
    isSelected: false,
    id: Date.now(),
  });
  clearValue();
};
let clearValue;
const busClearValue = (fn) => {
  clearValue = fn;
};
const del = (id) => {
  list.value = list.value.filter((item) => item.id !== id);
};
</script>

<style lang="scss" scoped>
.top-50 {
  margin-top: 150px;
}
</style>
